.here {
  color: #eef;
  /* background-color: #799; */
  background-color: rgb(0, 200, 255);
}
.body {
  display: block;
  background-color: black;
  font-size: 12px;
  background-image: url(../images/background.gif);
  /* background-position: 0, 0; */
  background-attachment: fixed;
  background-position: top left;
  background-repeat: repeat-x;
  padding-top: 20px;
  /* max-width: 100px; */
  color: #fb5;
  background-color: #334;
}
.content {
  /* background-color: #fff; */
  width: 80%;
  /* height: 999px; */
  margin: 0 10% 0 10%;
  /* opacity: 0.5; */
}
.content .image {
  background-color: #ccc;
  width: 100%;
  height: 30vh;
  background-color: #778;
  /* text-align: center; */
}
.content .image img {
  width: 100%;
  height: 30vh;
}
.nav {
  width: 100%;
  height: 5vh;
  /* background-color: red; */
  color: #455;
  background-color: #4b6b8b;
  /* border-color: #667; */
}
.nav ul {
  display: flex;
  justify-content: center;
}
.nav ul li {
  height: 5vh;
  width: 15%;
  display: block;
}
.nav ul li a {
  display: block;
  height: 5vh;
  width: 100%;
  text-align: center;
  line-height: 5vh;
  font-size: 15px;
  font-weight: bold;
  border-right: 1px solid #ccc;
  color: #fff;
}
.nav ul li:first-child a {
  border-left: 1px solid #ccc;
}
.nav ul li a:hover {
  color: #444656;
  background-color: #ffbb55;
}
/* .nav ul li a:active {
  background-color: rgb(12, 196, 196);
} */

/* article */
.article {
  padding: 5vh 8vh 5vh 8vh;
  color: #000;
  background-color: #fff;
  opacity: 0.9;
}
.article h4 {
  padding-top: 3vh;
  padding-bottom: 1vh;
  font-size: 3vh;
}
.article .item1 {
  font-size: 2vh;
  width: 100%;
  margin-bottom: 2vh;
  margin: 2vh 0 2vh 0;
  box-shadow: 1px 1px 5px #ccc, -1px -1px 5px #ccc;
  border-radius: 2vh;
}
.article .item1 img {
  width: 30vh;
  height: 30vh;
  padding-top: 1vh;
  margin: 1vh 1vh 3vh 4vh;
}
.article h1 {
  font-size: 6vh;
  /* padding: 0 0 3vh 0; */
  font-weight: bold;
}
.article .item1 h4 {
  padding-left: 2vh;
}
.article .item1 p {
  padding-left: 4vh;
}